<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .box {
            width: 450px;

            margin: 50px;
            display: flex;
            flex-direction: column;

            position: relative;
        }

        .box>.show {
            width: 450px;
            height: 450px;
            border: 1px solid #333;
            position: relative;
        }

        .box>.show>.mask {
            width: 200px;
            height: 200px;
            background-color: yellow;
            opacity: .4;
            position: absolute;
            top: 0px;
            left: 0px;

            display: none;
        }

        .box>.list {
            width: 100%;
            flex: 1;

            display: flex;
            justify-content: flex-start;
            align-items: center;

            box-sizing: border-box;
            padding: 20px;
        }

        .box>.list>p {
            width: 54px;
            height: 54px;
            border: 1px solid #333;
            margin-right: 10px;
        }

        .box>.list>p.active {
            border-color: red;
        }

        .box>.enlarge {
            width: 400px;
            height: 400px;

            position: absolute;
            top: 0;
            left: 101%;

            background: url(./imgs/1.big.jpg) no-repeat;
            background-size: 800px 800px;
            background-position: 0 0;

            display: none;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="show">
            <img src="./imgs/1.jpg" alt="">
            <div class="mask"></div>
        </div>
        <div class="list">
            <p class="active">
                <img src="./imgs/1.small.jpg" showImg="./imgs/1.jpg" enlargeImg="./imgs/1.big.jpg" alt="">
            </p>
            <p>
                <img src="./imgs/2.small.jpg" showImg="./imgs/2.jpg" enlargeImg="./imgs/2.big.jpg" alt="">
            </p>
        </div>
        <div class="enlarge"></div>
    </div>
    <script>
        /* 
        分析需求：1、鼠标移入 遮罩层和 放大图都需要显示，鼠标移除的时候 遮罩层和放大图隐藏
                 2、鼠标在移动的时候遮罩层要跟着鼠标动 （鼠标的中间动）（边界问题）
                 3、放大图也要按照左边比例来移动
                 4、鼠标移到小图上可以切换图片
         */



        /* 
           研究对象：放大镜对象；
            属性和方法：
                    属性：外层容器；
                        （属性：show  、 mask 、enlargeEle 、....）
                    方法：移入移除方法、 移动move方法 、切换图片....
        
        */




        // // 放大镜类；
        // // 定义
        // function Enlarge(containerEle) {
        //     this.boxEle = containerEle;
        //     this.showEle = containerEle.querySelector(".show");
        //     this.maskEle = containerEle.querySelector(".mask");
        //     this.enlargeEle = containerEle.querySelector(".enlarge");
        //     this.psEle = containerEle.querySelectorAll(".list p");
        //     this.imgEle = containerEle.querySelector(".show img");
        //     this.enterOrLeave();
        //     this.moveFn();
        // }

        // // 移入移除 
        // Enlarge.prototype.enterOrLeave = function () {
        //     this.showEle.onmouseenter = () => {
        //         this.maskEle.style.display = "block";
        //         this.enlargeEle.style.display = "block";
        //     }
        //     this.showEle.onmouseleave = () => {
        //         console.log(111);
        //         this.maskEle.style.display = "none";
        //         this.enlargeEle.style.display = "none";
        //     }
        // }

        // // 移动方法
        // Enlarge.prototype.moveFn = function () {
        //     var that = this;
        //     this.showEle.onmousemove = function (e) {
        //         // var x = e.offsetX;  //相对于元素自身的偏移量；
        //         // var y = e.offsetY;  
        //         // console.log(this.offsetLeft);

        //         var x = e.clientX - that.boxEle.offsetLeft - that.maskEle.offsetWidth / 2;
        //         var y = e.clientY - that.boxEle.offsetTop - that.maskEle.offsetHeight / 2;

        //         // 边界判断；
        //         // 左边判断
        //         if (x < 0) {
        //             x = 0;
        //         }
        //         // 右边判断
        //         if (x > this.offsetWidth - that.maskEle.offsetWidth) {
        //             x = this.offsetWidth - that.maskEle.offsetWidth
        //         }

        //         // 上边边界

        //         if (y < 0) {
        //             y = 0;
        //         }

        //         // 下边边界
        //         if (y > this.offsetHeight - that.maskEle.offsetHeight) {
        //             y = this.offsetHeight - that.maskEle.offsetHeight
        //         }

        //         // 获取enlarge的背景图的宽和高；

        //         var bgSize = getComputedStyle(that.enlargeEle, null)['background-size'];
        //         console.log(bgSize)
        //         var arr = bgSize.split(" ");
        //         var wNum = parseInt(arr[0]);  //背景图的宽
        //         var hNum = parseInt(arr[1]); //背景图的高；

        //         // 获取x距离
        //         var xx = (that.maskEle.offsetLeft / this.offsetWidth) * wNum;
        //         var yy = (that.maskEle.offsetTop / this.offsetHeight) * hNum;
        //         console.log(xx, yy);
        //         that.enlargeEle.style.backgroundPosition = `-${xx}px -${yy}px`;
        //         // console.log(x,y);
        //         that.maskEle.style.left = x + "px";
        //         that.maskEle.style.top = y + "px";
        //     }
        // }



        // // 放大镜加上切换方法；
        // Enlarge.prototype.switchPic = function () {
        //     this.psEle.forEach((item, key) => {
        //         item.onclick = () => {
        //             this.psEle.forEach((item, k) => {
        //                 if (k == key) {
        //                     item.classList.add("active");
        //                 } else {
        //                     item.classList.remove("active");
        //                 }

        //             })

        //             // console.log(key);
        //             // 替换上面的图像；
        //             this.imgEle.src = `./imgs/${key + 1}.jpg`;
        //             // 切换右边的大图；
        //             this.enlargeEle.style.backgroundImage = `url(./imgs/${key + 1}.big.jpg)`;
        //         }
        //     })
        // }



        // // 调用
        // var boxEle = document.querySelector(".box");
        // var obj = new Enlarge(boxEle);
        // obj.switchPic();












    // 获取show 的元素
    var showEle = document.querySelector(".show");
    // 获取遮罩层
    var maskEle = document.querySelector(".mask");
    // 获取放大区域
    var enlargeEle = document.querySelector(".enlarge");

    // 获取box元素
    var boxEle = document.querySelector(".box");
    showEle.onmouseenter = function () {
      maskEle.style.display = "block";
      enlargeEle.style.display = "block";
    }


    showEle.onmouseleave = function () {
      console.log(111);
      maskEle.style.display = "none";
      enlargeEle.style.display = "none";
    }


    // 遮罩层跟随鼠标移动；

    showEle.onmousemove = function (e) {
      // var x = e.offsetX;  //相对于元素自身的偏移量；
      // var y = e.offsetY;
      // console.log(this.offsetLeft);

      var x = e.clientX - boxEle.offsetLeft - maskEle.offsetWidth / 2;
      var y = e.clientY - boxEle.offsetTop - maskEle.offsetHeight / 2;

      // 边界判断；
      // 左边判断
      if (x < 0) {
        x = 0;
      }
      // 右边判断
      if (x > this.offsetWidth - maskEle.offsetWidth) {
        x = this.offsetWidth - maskEle.offsetWidth
      }

      // 上边边界

      if (y < 0) {
        y = 0;
      }

      // 下边边界
      if (y > this.offsetHeight - maskEle.offsetHeight) {
        y = this.offsetHeight - maskEle.offsetHeight
      }

      // 获取enlarge的背景图的宽和高；

      var bgSize = getComputedStyle(enlargeEle, null)['background-size'];
      console.log(bgSize)
      var arr = bgSize.split(" ");
      var wNum = parseInt(arr[0]);  //背景图的宽
      var hNum = parseInt(arr[1]); //背景图的高；

      // 获取x距离
      var xx = (maskEle.offsetLeft / this.offsetWidth) * wNum;
      var yy = (maskEle.offsetTop / this.offsetHeight) * hNum;
      console.log(xx, yy);
      enlargeEle.style.backgroundPosition = `-${xx}px -${yy}px`;
      // console.log(x,y);
      maskEle.style.left = x + "px";
      maskEle.style.top = y + "px";
    }



    // 点击小图切换 对应的图像
    var psEle = document.querySelectorAll(".list p");
    var imgEle = document.querySelector(".show img");
    psEle.forEach((item, key) => {
      item.onclick = function () {
        psEle.forEach((item, k) => {
          if (k == key) {
            item.classList.add("active");
          } else {
            item.classList.remove("active");
          }

        })

        // console.log(key);
        // 替换上面的图像；
        imgEle.src = `./imgs/${key + 1}.jpg`;
        // 切换右边的大图；
        enlargeEle.style.backgroundImage = `url(./imgs/${key + 1}.big.jpg)`;
      }
    })


    </script>


</body>

</html>